<template>
  <div class="chart_margin">
    <Card style="padding: 0px 1rem;" >
      <div class="chat_title" v-text="titleData"></div>
      <div class="chat_number">
        <ve-pie :data="chatData.datas" :settings="setting" :width="width" :height="height" ></ve-pie>
      </div>
      <div v-text="descData" class="chat_desc"></div>
    </Card>
  </div>
</template>

<script>
    export default {
        name: "TiyPieChart",
      props:{
        chatData:{
          type:Object,
          default:{
            title:'组件标题',
            desc:'具体的描述',
            extra:'',
            datas:{}

          }
        },
        title:{
          type: String,
          default:''
        },
        desc:{
          type: String,
          default:''
        },
        extra:{
          type: String,
          default:''
        },
        setting:{
          type:Object,
          default:{
            dataType:'normal'
          }
        },
        width:{
          type:String,
          default:'auto'
        },
        height:{
          type:String,
          default:'300px'
        }


      },
        data(){
          return{

          }
        },
      computed:{
        titleData(){
          return this.checkEmpty(this.title,this.chatData.title);
        },
        descData(){
          return this.checkEmpty(this.desc,this.chatData.desc);
        },
        extraData(){
          return this.checkEmpty(this.extra,this.chatData.extra);
        }

      },
      methods:{
        checkEmpty(value1,value2,defaultValue){
          if (value1!==''&& value1!==undefined &&value1!==null){
            return value1;
          }else if (value2!==''&& value2!==undefined &&value2!==null) {
            return value2;
          }else{
            return defaultValue===undefined?'':defaultValue;
          }


        }

      }
    }
</script>

<style lang="less" scoped>
@import  (once,optional)  "chat_base";

</style>
